<template>
  <div id="recommend">
    <h2>{{title}}</h2>
    <ul>
      <li v-for="recommend in recommends">
        <a :href="recommend.linkAddr">
          <img :src="recommend.imgsrc" :style="styles" alt="recommend.title">
          <div>
            <p>{{recommend.title}}</p>
            <span>下载量：{{recommend.downloads}}</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['recommends', 'width', 'height', 'title'],
    data () {
      return {
        widths: (this.width) ? this.width : 60,
        heights: (this.height) ? this.height : 60
      }
    },
    computed: {
      styles () {
        return {
          width: `${this.widths}px`,
          height: `${this.heights}px`
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  backGroundColor-blue = #5cadff
  shadleColor = #888

  #recommend {
    padding: 10px 20px;
    ul {
      padding: 10px 0;
    }
    li > a {
      /*border: 1px dashed #5cadff;*/
      box-shadow: 0 0 1px shadleColor
      display: flex;
      flex-direction: row;
      align-items center
      padding: .5em
      margin: 1em
      &:hover {
        border: 0
        box-shadow: 0 1px 2px shadleColor
        transform: translateY(-.2em) translateX(-1em)
        transition: All .5s ease
      }
      img {
        display: inline-block;
        margin: auto .5em;
      }
      div {
        height: 60px;
        display: inline-block
        p {
          line-height 30px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          font-size: 14px;
          color: #495060;
        }
        span {
          line-height 5px;
          display: block;
          margin: 10px 0;
          color: shadleColor;
        }
      }
    }
  }
</style>
